<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
            <!--head标签和body标签构成了页面的基本结构.head标签一般用来设置一些配置信息：比如：页面的作者，标题，页面的编码，页面的适配等，还可以引入css、js文件-->
            <!--css：给页面添加样式。js：动态修改标签元素的脚本。-->
        <style>
            /* css 选择器：id选择器、class选择器、属性选择器、父子选择器、后代选择器、伪类选择器、标签选择器 */
            /*给id属性值等于one的标签设置样式*/
            #one{
                font-size: 40px;
            }
            /*给class属性值等于a的标签设置样式*/
            .a {
                color: blue;
            }
            .b{
                color: red;
            }
            .c{
                color: cadetblue;
            }

        </style>
    </head>
    <body>
        <!--1. 标签之间的关系： 父子标签、兄弟标签、后带标签；-->
        <!--2. 标签属性的作用； id属性、class属性；-->
        <!--<div>标签和<a>、<p>之间属于父子标签：div是父标签、<a>、<p>是div的子标签(直接标签： 不包含子标签中的子标签.)<b>标签不是idiv的直接子标签，是div的后代标签。-->
        <div>
            <!--<a>标签和<p>标签是兄弟标签，属于同一层级。<body>和<head>是兄弟标签。-->
            <a href="#">百度一下</a>
            <!--属性的作用主要是用于查找和定位标签的。id属性的值一般都是唯一的，并且id属性只能设置一个值，class属性的值，不同的标签属性值可以相同，并且class可以设置多个值。所以class属性一般用来查找批量标签。-->
            <p id="one">这是一个<b>段落</b>标签。</p>
            <p class="a b c">段落2</p>
            <p class="a">段落3</p>
            <p class="c">段落4</p>
        </div>
    </body>
</html>